import { Popup } from "@taroify/core"
import { memo, ReactNode } from 'react'
import { View } from "@tarojs/components"
import BtSafeArea from "../BtSafeArea"
import './index.scss'

interface BtNavBarProps {
  /** 子元素 */
  children: ReactNode
  placement?: 'top' | 'bottom'
  /** 自定义类名 */
  className?: string
  title?: string
  open?: boolean
  /** 关闭弹出层时触发 */
  onClose?: (value: boolean) => void
}

function BtPopup({
  placement = 'bottom',
  className = '',
  children,
  open,
  title = '',
  onClose
}: BtNavBarProps) {
  return (
    <Popup open={open} onClose={onClose} className={`bt-popup ${className}`} placement={placement}>
      <View className='bt-popup__content'>
        {title && <View className='bt-popup__title'>{title}</View>}
        {children}
        <BtSafeArea position='bottom' />
      </View>
    </Popup>
  )
}

export default memo(BtPopup)
